<template>
   <div class="showResultBar">
      <div class="leftWrap">
          <input type="text" :value="$store.state.calResult" disabled>
      </div>

      <div class="rightWrap">
         <button  @click="equal"><h5>=</h5></button>
          <button @click="clear"><h5>clear</h5></button>
      </div>

   </div>
</template>

<style lang="less" scoped>

   .showResultBar{
      width:100%;
      display: flex;

      .leftWrap{
        flex:8;
      
        input{
            width:100%;
            height:50px;
            outline: none;
            padding-left:10px;
        }
      }
      .rightWrap{
        flex:2;
        display: flex;
        button{
            flex:5;
            outline: none;   
            border:none;         
        }
      }
   }
</style>
<script>

import {Component,Vue } from 'vue-property-decorator'

@Component
export default class ShowCalResultBar extends Vue{

    clear(){

      this.$store.commit("clear")
    }

    equal(){

      this.$store.commit("equal")
    }
}


</script>